:root {
  --background: #fdfcff;
  --foreground: #4d2999;
  --primary: #8057e8;
  --primary-foreground: #ffffff;
  --muted-foreground: #6e72af;
  --border: #e4ddf5;
  --surface: #fdfcff;
  --surface-soft: #f7f3ff;
  --brand-soft: #ae91f6;
  --brand-deep: #4b2796;
  --header-bg: rgba(248, 246, 255, .9);
  --focus: #8a60ed;
  --font-body: "Segoe UI", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--foreground); font-family: var(--font-body); text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.app-shell { min-height: 100vh; background: linear-gradient(180deg, var(--header-bg) 0, var(--background) 9rem), var(--background); }
.site-header { height: 76px; border-bottom: 1px solid var(--border); background: var(--header-bg); }
.nav-shell { position: relative; width: min(100% - 64px, 1880px); height: 100%; margin-inline: auto; display: flex; align-items: center; }
.back-home { position: absolute; left: 0; top: 50%; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; transform: translateY(-50%); border: 1px solid var(--border); border-radius: 50%; color: var(--primary); font-size: 25px; line-height: 1; transition: background 180ms ease, transform 180ms ease; }
.back-home:hover { background: var(--surface-soft); transform: translateY(-50%) translateX(-2px); }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; color: var(--primary); font-size: 24px; font-weight: 750; }
.brand-mark { width: 5px; height: 27px; border-radius: 4px; background: var(--brand-soft); }
.desktop-nav { align-self: stretch; display: flex; align-items: stretch; justify-content: center; gap: clamp(24px, 3.2vw, 58px); }
.nav-link { position: relative; display: flex; align-items: center; color: var(--muted-foreground); font-size: 14px; font-weight: 500; transition: color 180ms ease; }
.nav-link:hover, .nav-link.active { color: var(--primary); }
.nav-link.active { font-weight: 700; }
.nav-link.active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.login-button { justify-self: end; min-height: 43px; display: inline-flex; align-items: center; gap: 11px; padding: 0 22px; border: 1px solid var(--brand-soft); border-radius: 999px; color: var(--primary); font-size: 13px; font-weight: 500; transition: background 180ms ease, transform 180ms ease; }
.login-button:hover { background: var(--surface-soft); transform: translateY(-1px); }
.user-icon { position: relative; width: 16px; height: 17px; border: 1.8px solid currentColor; border-radius: 9px 9px 7px 7px; border-top-color: transparent; }
.user-icon::before { content: ""; position: absolute; top: -2px; left: 4px; width: 6px; height: 6px; border: 1.8px solid currentColor; border-radius: 50%; background: var(--header-bg); }
.main-content { width: min(100% - 48px, 1420px); margin-inline: auto; padding: clamp(44px, 5.2vw, 72px) 0 56px; }
.intro { max-width: 760px; }
.eyebrow { margin: 0 0 12px; color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .34em; }
h1, h2, p { letter-spacing: 0; }
h1 { margin: 0; color: var(--brand-deep); font-size: clamp(32px, 3vw, 42px); line-height: 1.15; font-weight: 740; }
.intro-copy { margin: 24px 0 0; color: var(--muted-foreground); font-size: 16px; line-height: 1.62; }
.info-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.info-card { min-height: 154px; padding: 19px 28px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.info-card h2, .action-banner h2 { margin: 0; color: var(--primary); font-size: 21px; line-height: 1.35; font-weight: 700; }
.info-card p { margin: 13px 0 0; color: var(--muted-foreground); font-size: 15px; line-height: 1.65; }
.values-list { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.values-list li { display: grid; grid-template-columns: 12px 118px 1fr; align-items: baseline; color: var(--muted-foreground); font-size: 13px; line-height: 1.35; }
.values-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-soft); }
.values-list strong { color: var(--primary); }
.action-banner { margin-top: 26px; min-height: 94px; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.action-banner h2 { font-size: 18px; }
.action-banner p { margin: 8px 0 0; color: var(--muted-foreground); font-size: 14px; }
.report-button { flex: 0 0 auto; min-width: 168px; min-height: 45px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 999px; background: linear-gradient(100deg, var(--brand-soft), var(--primary)); color: var(--primary-foreground); font-size: 14px; font-weight: 600; transition: transform 180ms ease, filter 180ms ease; }
.report-button:hover { transform: translateY(-2px); filter: saturate(1.12); }
.anchor-targets { display: none; }

@media (max-width: 900px) {
  .nav-shell { width: min(100% - 36px, 1420px); grid-template-columns: 1fr auto; }
  .back-home { left: 0; }
  .desktop-nav, .login-button { display: none; }
  .info-grid { gap: 18px; }
  .values-list li { grid-template-columns: 12px 1fr; }
  .values-list li span { grid-column: 2; margin-top: 2px; }
}

@media (max-width: 680px) {
  .site-header { height: 68px; }
  .brand { font-size: 21px; }
  .brand-mark { height: 24px; }
  .main-content { width: min(100% - 32px, 1420px); padding-top: 36px; }
  .eyebrow { font-size: 11px; }
  .intro-copy { margin-top: 18px; font-size: 15px; }
  .info-grid { grid-template-columns: 1fr; margin-top: 26px; }
  .info-card { min-height: 0; padding: 20px; }
  .info-card h2 { font-size: 19px; }
  .action-banner { align-items: stretch; flex-direction: column; padding: 22px 20px; }
  .report-button { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}